<template>
  <div class="layout1">
    <div v-for="(item) in tableData" key="item.id">
      <div>
      <div style="position: relative;height: 3vw" >
        <div style="position: absolute;right: 5%;" v-if="this.formMsg.role==1">
          <el-input size="large" v-model="item.blockName" placeholder="Please input" style="padding-left:1.5vw;width: 20vw;font-size: 1vw;" clearable/>
          <el-button style="margin-left: 1.2vw;font-size: 1vw;border: none" @click="changeTitle(item)">修改标题</el-button>
          <el-popconfirm title="确定删除吗" @confirm="handDelete(item.id)" >
            <template #reference><el-button size="small" style="font-size: 1vw;border: none" >删除组件</el-button></template>
          </el-popconfirm>
        </div>
        <p style="position: absolute;top: 75%;left: 50%;transform: translate(-50%,-50%);font-size: 3.0vw">
          {{item.blockName}}
        </p>
      </div>
        <div v-if="item.kindId==1" >
          <Component1 id=item.id :spareId=item.id :sparePageId=this.$route.query.pageId />
          <el-divider />
        </div>
        <div v-else-if="item.kindId==2">
          <Component2 id=item.id :spareId=item.id :sparePageId=this.$route.query.pageId />
          <el-divider />
        </div>
      </div>
    </div >
  </div>
  <div v-if="this.formMsg.role==1">
      <el-row style="position: relative; width: 100%;height: 25vw">
        <p><el-image style="width: 25%; cursor:pointer;height: 100%;left: 20%;position: absolute;
        border: silver;border-radius: 1vw;
        " :src="require('@/assets/研究团队1.png')" :fit="fit" @click.native="add1"/></p>
        <p><el-image style="width: 25%; cursor:pointer;height: 100%;right: 20%;position: absolute;
         border: silver;border-radius: 1vw;
        " :src="require('@/assets/研究团队.png')" :fit="fit" @click.native="add2"/></p>
      </el-row>
  </div>
</template>
<script>

import Component1 from "@/components/Page/Page1/Component1";
import Component2 from "@/components/Page/Page1/Component2";
import request from "@/utils/request";

export default {
  name: "WebPage1",
  data() {
    return {
      kindId:'',
      blockId:'',
      tableData: [],
      data:{},
      total: "0",
      formMsg:{},
    }
  },
  components: {
    Component1,
    Component2,
  },
  created() {
    let str=sessionStorage.getItem("user")||"{}"
    this.formMsg=JSON.parse(str);
    request.get("/user/"+this.formMsg.id).then(res=>{
      if(res.code==='0'){
        this.formMsg=res.data;
      }
    })
    this.load();
  },
  methods: {
    load() {
      request.get("/page1block", {
        params:{
          searchId: this.$route.query.pageId
        }
      }).then(res => {
        console.log(res);
        this.tableData = res;
      })

    },
    changeTitle(item){
      this.data={};
      this.data.pageId= this.$route.query.pageId;
      this.data=item;
      request.put("/page1block", this.data).then(res=>{
        console.log(res);
        if(res.code=='0'){
          this.$message({
            type:"success",
            message:"修改成功"
          })
        }else{
          this.$message({
            type:"error",
            message:res.msg
          })
        }
      })
    },
    add1( ) {
      this.data={};
      this.data.kindId=1;
      this.data.pageId=this.$route.query.pageId;
      this.data.blockName="请输入标题";
      request.post("/page1block", this.data
      ).then(res => {
        console.log(res);
        this.$message({
          type: "success",
          message: "新增成功"
        })
      })
      this.load();
    },
    add2( ) {
      this.data={};
      this.data.kindId=2;
      this.data.pageId=this.$route.query.pageId;;
      this.data.blockName="请输入标题";
      request.post("/page1block", this.data
      ).then(res => {
        console.log(res);
        this.$message({
          type: "success",
          message: "新增成功"
        })
      })
      this.load();
    },
    handDelete(id){
      console.log(id);
      request.delete("/page1block/"+id).then(res=>{
        if(res.code=='0'){
          this.$message({
            type:"success",
            message:"删除成功"
          })
        }else{
          this.$message({
            type:"error",
            message:res.msg
          })
        }
      })
      request.delete("/webpage1/deletebyblockId/"+id).then(res=>{
        if(res.code!='0'){
          this.$message({
            type:"error",
            message:res.msg
          })
        }
      })
      this.load();
    }
  }
}


</script>
<style scoped>
.layout1{
  margin-top: 5vw;
}
</style>